2<template>
  <div style="padding: 10px;" v-loading="isloading">
    <div class="top">
      <span class="tag" :class="{color: isShow==0}" @click="tag(0)"
        v-if="$hasBP('btn.msg.msgList') && this.type != 0">我的消息</span>
      <span class="tag" :class="{color: isShow==1}" @click="tag(1)" v-if="$hasBP('btn.msg.send')">我的通知</span>

    </div>
    <div class="conter">
      <el-button type="primary" size="small" v-if="$hasBP('btn.msg.send')&&isShow!=0" style="float: right; margin: 5px;"
        @click="sendMsg">
        发起通知</el-button>
      <div style="clear: both;"></div>
      <template v-if="msgList.length!=0&&this.isShow!=1">
        <el-card class="box-card" v-for="(item,index) in msgList" :key="index">
          <div>
            <div style="float: left;">
              <el-avatar size="large" :src="item.image"></el-avatar>
            </div>
            <div style="position: relative;left: 10px;">
              <div style="font-weight: 700;">{{item.sendName}}</div>
              <div style="color: gray;">{{item.time}}</div>
            </div>
            <div style="clear: both;"></div>
            <div style="margin-top: 20px;margin-left:50px">
              {{item.msg}}
            </div>
          </div>
        </el-card>
      </template>

      <template v-if="SendMsgList.length!=0&&this.isShow!=0">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in SendMsgList" :key="index" :timestamp="item.time" placement="top">
            <el-card>
              <h4>{{item.msg}}</h4>
              <p>我在{{item.time}}发的通知</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </template>

      <div v-if="msgList.length==0&&this.isShow!=1">
        <el-empty image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
          :image-size="500" description="" />
      </div>

      <div v-if="SendMsgList.length==0&&this.isShow!=0">
        <el-empty image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
          :image-size="500" description="" />
      </div>
    </div>

    <el-dialog title="发送消息" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="班级">
            <el-select v-model="form.id" placeholder="请选择">
              <el-option v-for="item in classList" :key="item.id" :label="item.claName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息">
            <el-input type="textarea" :rows="3" placeholder="请输入消息内容" v-model="form.msg">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="affirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'Msg',
    data() {
      return {
        isShow: 0,
        msgList: [],
        classList: [],
        dialogVisible: false,
        form: {},
        SendMsgList: [],
        isloading: true
      };
    },
    mounted() {
      if (this.$hasBP('btn.msg.msgList') && this.type != 0) {  //我的消息
        this.getList()
        this.isShow = 0
      } else {//我的通知
        this.isShow = 1
        this.getSendMsg()
      }
      this.getClassList()
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        "info",
        "type",
        "name",
        "id"
      ])
    },
    methods: {
      tag(index) {
        this.isShow = index
        if (index == 0) {//我的消息
          this.getList()
        } else {
          this.getSendMsg()
        }
      },
      getList() {
        this.$api.msg.getMagList(this.info.classId).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.isloading = false
            this.msgList = []
            this.msgList = res.data
          }
        })
      },
      getSendMsg() {//获取发送的通知
        this.$api.msg.getSendMsg(this.id).then(res => {
          if (res.code == 200) {
            this.isloading = false
            this.SendMsgList = res.data
          }
        })
      },
      sendMsg() {
        this.dialogVisible = true
      },
      getClassList() {
        let id = "";
        if (this.info != undefined || this.info != null) {
          id = this.info.id
        }
        this.$api.common.getClassList(this.type, id).then(res => {
          // console.log(res);
          if (res.code == 200) {
            this.classList = res.data
          }
        })
      },
      affirm() {
        if (this.type == 0) {//管理员
          this.form.name = "系统管理员"
        } else if (this.type == 1) {
          this.form.name = "辅导员-" + this.info.teaName
        } else if (this.type == 2) {
          this.form.name = this.info.stuDuties + "-" + this.info.stuName
        }
        console.log(this.form);
        this.$api.msg.sendMessage(this.form).then(res => {
          if (res.code == 200) {
            this.$message.success("发送成功~")
            this.getSendMsg()
            this.dialogVisible = false
          }
        })
      }

    },
  };
</script>

<style lang="scss" scoped>
  .top {
    height: 50px;
    /* border: 1px solid red; */
    /* line-height: 30px; */
    margin: 10px 5px;

  }

  .tag {
    display: inline-block;
    height: 33px;
    width: 80px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    margin: 0 5px;
    background-color: #f4f4f5;
    cursor: pointer;
  }

  .color {
    background-color: #ecf5ff;
    color: #409eff;
  }

  .conter {
    height: 500px;
    border: 1px solid rgb(205, 205, 208);
    overflow: auto;
    position: relative;
  }

  .box-card {
    margin-bottom: 8px;
  }
</style>